<template>
  <div class="watersource-container">
    <div class="watersource-main">
      <div class="watersource-info">
        <div>{{ props.waterData.menuName }}</div>
        <div>
          <el-icon @click="closeClick">
            <Close />
          </el-icon>
        </div>
      </div>
      <div style="height: 100%">
        <el-input v-model="inputValue" size="small" class="w-50 m-2">
          <template #prefix>
            <el-icon class="el-input__icon" @click="searchClick">
              <search />
            </el-icon>
          </template>
        </el-input>
        <div style="padding: 0 10px; height: 90%; overflow: auto">
          <div
            v-for="(item, index) in dataList"
            v-show="
              props.waterData.menuName != '监控视频' &&
              props.waterData.menuName != '限宽' &&
              props.waterData.menuName != '应急事故池'
            "
            :key="index"
            class="xfsgw-item"
            :class="{ 'active-color': activeIndex == item.id }"
            @click="clickHandler(item)"
          >
            <div style="display: flex; justify-content: space-between">
              <div class="overhidden"  :title="item.bzmc">{{ item.bzmc }}</div>
              <div style="line-height: 54px">
                <div style="display: flex">
                  <div style="width: 20px; height: 20px; cursor: pointer" @click="showDialog(item)">
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/fire/编辑.png"
                      alt=""
                    />
                  </div>
                  <div
                    style="width: 20px; height: 20px; cursor: pointer; margin-left: 5px"
                    @click="removeClick(item)"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/fire/删除.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-for="(item, index) in filPersons"
            v-show="props.waterData.menuName == '限宽' || props.waterData.menuName == '应急事故池'"
            :key="index"
            class="xfsgw-item"
            :class="{ 'active-color': activeIndex == item.id }"
            @click="clickHandler(item)"
          >
            <div style="display: flex; justify-content: space-between">
              <span>{{ item.searchMc }}</span>
              <div style="line-height: 54px">
                <div style="display: flex">
                  <div style="width: 20px; height: 20px; cursor: pointer" @click="showDialog(item)">
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/fire/编辑.png"
                      alt=""
                    />
                  </div>
                  <div
                    style="width: 20px; height: 20px; cursor: pointer; margin-left: 5px"
                    @click="removeClick(item)"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/fire/删除.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-for="(item, index) in dataList"
            v-show="props.waterData.menuName == '监控视频'"
            :key="index"
            class="xfsgw-item"
            :class="{ 'active-color': activeIndex == item.id }"
            @click.stop="clickHandler(item)"
          >
            <div style="display: flex; justify-content: space-between">
              <div
                :title="item.sbmc"
                class=""
                style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                @click="videoClick(item, index)"
              >
                {{ item.sbmc }}
              </div>
              <div style="line-height: 54px">
                <div style="display: flex">
                  <div
                    v-if="item.sfbh === 0"
                    style="width: 30px; height: 30px; cursor: pointer"
                    @click.stop="showDialog(item)"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/common/jksbtj.png"
                      alt=""
                    />
                  </div>
                  <div
                    v-else
                    style="width: 30px; height: 30px; cursor: pointer; margin-left: 5px"
                    @click.stop="removeClick(item)"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      src="/src/assets/image/common/map-delete.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <formInput
      v-if="isform"
      ref="dthhtrthr"
      :dianwei-list="dianweiList"
      :water-data="props.waterData"
      :xfbfxx-list="XfbfxxList"
      @cancelClick="cancelClick"
      @updateList="updateList"
    ></formInput>
    <!-- 删除数据二次确认弹窗 -->
    <SecondaryConfirm @secondaryConfirmSave="secondaryConfirmSave" />

    <div
      v-if="videoShow"
      className="z-30 w-600px h-450px "
      style="background: rgba(28, 28, 28, 0.4)"
      class="videobox"
    >
      <div class="close-group">
        <el-icon class="close-sign" @click="jkCloseClick">
          <Close />
        </el-icon>
      </div>
      <iframe className="z-30" :src="videoSrc" frameBorder="0" width="600px" height="450px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineExpose } from 'vue'
import jksp_icon from '@/assets/image/mapIcon/jksp-icon.png'
import { queryxfssDdByQyId, queryHgspInfoList } from '@/service/api'
import { chemical_server } from '@/service'
import { Close, Search } from '@element-plus/icons-vue'
import {
  featureClick,
  removeMapFactor,
  delMapFactorInfo,
  flyToLxOrCjid,
} from '@/utils/common/index'
import formInput from '../formInput/index.vue'
import { useChemicalStore, usezhezaocStore } from '@/store'
import { clearEditState } from '@/utils/common/index'
import { videoPlayer } from '@/components/CVideoPlayer'
import SecondaryConfirm from '@/components/SecondaryConfirm/index.vue'
const chemicalStore = useChemicalStore()
const data = usezhezaocStore()
const props = defineProps<{
  waterData: any
}>()
const videoShow = ref(false)
const dthhtrthr = ref()
const dianweiList = ref()
const inputValue = ref('')
const activeIndex = ref(0) //当前tab选中项
const formInputref = ref()
const dataList = ref([])
const player = ref()
const videourl = ref('')
//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})
interface ResultType {
  result: {
    resultCode: string
    resultMessage: string
  }
  data: object
}

watch(
  () => props.waterData.menuName,
  (newVal, oldVal) => {
    if (props.waterData.menuName == '监控视频' || newVal == '监控视频') {
      isform.value = false
      getqueryHgspInfoList()
    }
  }
)
const jkCloseClick = () => {
  videoShow.value = false
}
/** 适配接口返回结果 */
function adapter(response: ResultType) {
  if (response.result.resultCode == '000000') {
    return response.data
  }
  throw new Error()
}
const videoSrc = ref()
const url = ref('')
const queryXfbfxxInfo = (params?: any) =>
  chemical_server.get(`${url.value}`, { params }).then((res: any) => adapter(res as any))
const XfbfxxList = ref({})
const isform = ref(false)
const emit = defineEmits(['closeClick'])
function closeClick() {
  clearEditState() //清除标注状态
  emit('closeClick', false)
}
function activeReset() {
  isform.value = false
  activeIndex.value = 0
  isform.value
    ? nextTick(() => {
      dthhtrthr.value.changeTitle()
      })
    : ''
  switch (props.waterData.orderId) {
    case 1:
      url.value = '/crkxx/queryCrkxxInfo' //出入口
      break
    case 2:
      url.value = '/yjsgcxx/queryYjsgcxxInfo' //应急事故池
      break
    case 3:
      url.value = '/dcskzsxx/queryDcskzsxxInfo' //dcs控制室
      break
    case 4:
      url.value = '/xfkzsxx/queryXfkzsxxInfo' //消防控制室
      break
    case 5:
      url.value = '/dl/queryDlInfo' //限宽
      break
    case 6:
      url.value = '/dsgxx/queryDsgxxInfo' //地势
      break
    case 7:
      break
    default:
      break
  }
}
function queryxfssDdList(item: any) {
  isform.value = false

  if (item.menuName === '监控视频') {
    getqueryHgspInfoList()
  } else {
    getqueryxfssDdByQyId()
  }
}

const getqueryHgspInfoList = () => {
  const params = {
    qyid: qyId.value,
    cxmx: inputValue.value ? inputValue.value : '',
  }
  queryHgspInfoList(params).then((res: any) => {
    dataList.value = res
    data.isShow = false
  })
}

function getqueryxfssDdByQyId() {
  // const params = {
  //   bzLx: props.waterData.menuCode ? props.waterData.menuCode : '',
  //   qyid: qyId.value,
  //   cxmc: inputValue.value ? inputValue.value : '',
  //   // jgId:sjszjgTywysbm.sjszjgTywysbm
  // }
  let params
  if (props.waterData.menuName == '限宽' || props.waterData.menuName == '应急事故池') {
    params = {
      bzLx: props.waterData.menuCode ? props.waterData.menuCode : '',
      qyid: qyId.value,
    }
  } else {
    params = {
      bzLx: props.waterData.menuCode ? props.waterData.menuCode : '',
      qyid: qyId.value,
      cxmc: inputValue.value ? inputValue.value : '',
    }
  }
  queryxfssDdByQyId(params).then((res: any) => {
    dataList.value = res
    if (props.waterData.menuName == '限宽' || props.waterData.menuName == '应急事故池') {
      dataList.value = res.map((item: any, index: any) => {
        return {
          ...item,
          searchMc: item.bzmc + ' ' + '-' + ' ' + (index + 1),
        }
      })

      if (inputValue.value == '') {
        filPersons.value = dataList.value
      }
    }
    data.isShow = false
  })
}
const filPersons: any = ref([])
watch(
  () => inputValue.value,
  (newVal, oldVal) => {
    if (props.waterData.menuName === '监控视频') {
      getqueryHgspInfoList()
    } else if (props.waterData.menuName === '限宽' || props.waterData.menuName === '应急事故池') {
      if (inputValue.value != '') {
        filPersons.value = dataList.value.filter(
          (item: any) => item.searchMc.indexOf(inputValue.value) !== -1
        )
      } else {
        filPersons.value = dataList.value
      }
    } else {
      getqueryxfssDdByQyId()
    }
  },
  { immediate: true }
)

const secondaryConfirmSave = (type: any, typeCode: any) => {
  const item: any = chemicalStore.secondaryConfirmInfo.data
  inputValue.value = ''
  data.isShow = true
  /** 删除对应地图要素Start */
  const overlayArr = ['25', '27', '28', '34']
  const pointArr = ['26']
  const rectArr = ['30']
  if (overlayArr.includes(item.bzlx)) {
    //如果是监控
    if (item.bzlx === '34') {
      delMapFactorInfo(item, 'overlay')
      return
    }

    removeMapFactor(item.cjid, 'overlay')
  } else if (pointArr.includes(item.bzlx)) {
    removeMapFactor(item.cjid, 'point')
  } else if (rectArr.includes(item.bzlx)) {
    removeMapFactor(item.cjid, 'rect')
  }
  /** 删除对应地图要素 End */
  const param = {
    sfyx: 0,
    id: item.cjid,
    qyid: qyId.value,
  }
  if (props.waterData.menuId == 'ys00201') {
    upDatecrk(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00202') {
    upDateyjsgc(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00203') {
    upDatedcskzs(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00204') {
    upDatexfkzs(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00205') {
    upDatexk(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00206') {
    upDatezrsy(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  } else if (props.waterData.menuId == 'ys00207') {
    upDatxhs(param).then((res: any) => {
      updateList(item)
      cancelClick()
    })
  }
}

const delList = {
  出入口: '是否确定删除出入口以及该出入口地图上的信息',
  应急事故池: '是否确定删除应急事故池以及该应急事故池地图上的信息',
  DCS控制室: '是否确定删除DCS控制室以及该DCS控制室地图上的信息',
  消防控制室: '是否确定删除消防控制室以及该消防控制室地图上的信息',
  限宽: '是否确定删除限宽以及该限宽地图上的信息',
  监控视频: '是否确定删除监控视频以及该监控视频地图上的信息',
}
function removeClick(item: any) {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: delList[props.waterData.menuName],
    type: 'delData',
    typeCode: props.waterData.menuName,
    data: item,
  }
}
function updateList(item) {
  queryxfssDdList(item)
}
function searchClick() {
  queryxfssDdList()
}
function queryXfbfxxList(item: any) {
  Object.keys(XfbfxxList).map((item) => delete XfbfxxList[item])
  const params = {
    key: item.cjid,
  }
  isform.value = true
  queryXfbfxxInfo(params).then((res: any) => {
    dthhtrthr.value.xfbfxxData = res
    dthhtrthr.value.xfbfxxData.sfyx = 1

    dthhtrthr.value.clickFileHandle()

    dthhtrthr.value.xfbfxxData.qyid = qyId.value
  })
}
function clickHandler(item: any) {
  console.log(window.ApiDev.videoPlayUrl)
  clearEditState() //清除标注状态

  /** 地图要素定位 Strat */
  const overlayArr = ['ys00201', 'ys00203', 'ys00204', 'ys00207']
  const pointArr = ['ys00202']
  const rectArr = ['ys00205']

  if (overlayArr.includes(props.waterData.menuId)) {
    //监控视频
    if (props.waterData.menuId === 'ys00207') {
      videoShow.value = false
      const factorInfo = chemicalStore.currentFactorInfo
      videoSrc.value =
        window.app.config.globalProperties.$config.videoPlayUrl +
        `/easy-player/videoIndex.html?videosrc=${item.videoStream}`
      // videoSrc.value = `http://${window.location.host}/easy-player/videoIndex.html?videosrc=${item.videoStream}`
      videoShow.value = true
      flyToLxOrCjid('overlay', item.id)
    } else {
      flyToLxOrCjid('overlay', item.cjid)
    }
  } else if (pointArr.includes(props.waterData.menuId)) {
    flyToLxOrCjid('point', item.cjid)
  } else if (rectArr.includes(props.waterData.menuId)) {
    flyToLxOrCjid('rect', item.cjid)
  }
  /** 地图要素定位 End */
  activeIndex.value = item.id
}
function showDialog(item: any) {
  if (props.waterData.menuName != '监控视频') {
    chemicalStore.enterpriseFacilities.dialogType = 'edit'
    isform.value = false
    dianweiList.value = item
    queryXfbfxxList(item)

    nextTick(() => {
      dthhtrthr.value.changeTitle()
    })
  } else {
    item.mc = item.sbmc
    featureClick({
      id: item.id,
      parentName: item.id,
      MapFactorType: 'overlay',
      MapFactorName: '监控',
      bzlx: '34',
      text: item.sbmc,
      mapIconUrl: jksp_icon,
      parentMenuId: 'ys00002',
      attribute: item,
    })
  }
}
function showkdkfk() {
  isform.value = true
}
function cancelClick() {
  isform.value = false
}

function videoClick(item: any, idx: any) {
  // const factorInfo = chemicalStore.currentFactorInfo
  // const videoSrc = `http://${window.location.host}/easy-player/videoIndex.html?videosrc=${item.videoStream}`
  // console.log(videoSrc)
  // // const content = videoPlayer(item).outHTML
  // const el = document.createElement('div')
  // el.innerHTML = `
  // <div className='z-30 w-600px h-450px ' style=' background: rgba(28, 28, 28, 0.4);'>
  //           <iframe className='z-30' src=${videoSrc} frameBorder='0' width='600px' height='450px' />
  //         </div>
  //  `
  // window.GOverlay.add({
  //   id: '',
  //   attribute: { type: 'test' },
  //   option: {
  //     position: [115, 29, 30],
  //     elementName: el,
  //     positioning: 'bottom-center',
  //     offset: [0, 0],
  //   },
  // })
  // window.map3DControl.viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(115, 29, 30), //必填，目标点坐标
  //   duration: 3, //非必填，漫游持续的时间
  //   // complete: option.callBack || function () { },//非必填，漫游结束时的回调函数
  // })
  // // 实例化播放器
  // player.value = new WasmPlayer(null, 'Player', callbackfun, {
  //   Height: true,
  // })
  // // 调用播放
  // player.value.play(videourl, 1)
  // debugger
  // videoShow.value = true
}

defineExpose({ activeReset, queryxfssDdList, showkdkfk })
</script>

<style lang="less" scoped>
.watersource-container {
  width: 100%;
  height: 100%;

  // background-color: hotpink;
  .watersource-main {
    width: 240px;
    height: 100%;
    border: 1px solid #0d609c;
    background: rgba(1, 7, 17, 0.7);
    box-sizing: border-box;

    .w-50 {
      width: 13.7rem;
    }

    /deep/ .el-input--small .el-input__wrapper {
      padding: 1px 7px;
      background-color: #000;
      color: rgba(255, 255, 255, 0.8);
    }

    .xfsgw-item {
      width: 100%;
      height: 50px;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.298039215686275);
      color: rgba(255, 255, 255, 0.8);
      padding: 0 10px;
      line-height: 50px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 10px;
    }

    // .xfsgw-item:active {
    //   background-color: rgba(0, 191, 191, 0.298039215686275);
    //   border-color: rgba(0, 191, 191, 1);
    // }
  }

  .watersource-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    border-bottom: 1px solid grey;
    font-size: 18px;
    font-weight: 700;
    box-sizing: border-box;

    /deep/.el-icon {
      font-size: 20px;
      cursor: pointer;
      vertical-align: middle;
    }
  }
}

.active-color {
  background-color: rgba(21, 214, 186, 0.3) !important;
}
.videobox {
  position: absolute;
  top: 10px;
  left: -620px;
  width: 600px;
  height: 470px;
  .close-group {
    position: relative;
    color: #fff;
    font-size: 24px;
    width: 100%;
    height: 20px;
    .close-sign {
      position: absolute;
      right: 10px;
      cursor: pointer;
    }
  }
}
.overhidden{
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
